<template>
  <div>
    <div id="app">
      <div id="_j_mfw_focus" class="mfw-focus">
        <div class="show-slider" style="height: 450px">
          <ul class="show-image">
            <li
              data-id="0"
              class="show_image first"
              v-show="item.sequence === isAciveShow"
              v-for="item in bannerList"
              :key="item.id"
            >
              <a
                href="./traveldetail.html?id=5e3bf6a93f050000ff0035ec"
                class="show-pic"
                ><img :src="item.coverUrl"
              /></a>
              <a href="javascript:void(0);" class="show-title dark">
                <div class="date"><span class="day">15</span>/Oct.2020</div>
                <h3>{{ item.title }}</h3>
              </a>
            </li>
          </ul>
          <ul class="show-nav">
            <li
              :class="
                item.sequence === isAciveShow ? 'show_nav active' : 'show_nav'
              "
              v-for="item in bannerList"
              :key="item.id"
              @click="bannerNavClick(item.sequence)"
            >
              <a href="javascript:"
                ><img :src="item.coverUrl" height="62" width="110" />
                <span></span
              ></a>
            </li>
          </ul>
          <a target="_blank" href="javascript:void(0);" class="show-more"
            >历历在目</a
          >
        </div>
        <div id="_j_index_search" class="search-container">
          <div class="search-group">
            <div id="_j_index_search_tab" class="searchtab">
              <ul class="clearfix">
                <li data-index="-1" class="tab-selected"><i></i>全部</li>
                <li data-index="0"><i></i>目的地</li>
                <li data-index="1"><i></i>攻略</li>
                <li data-index="2"><i></i>游记</li>
                <li data-index="3"><i></i>找人</li>
              </ul>
            </div>
            <div id="_j_index_search_bar_all" class="searchbar">
              <div class="search-wrapper">
                <div class="search-input">
                  <input
                    name="keyword"
                    id="keyword"
                    type="text"
                    placeholder="搜目的地/攻略/游记/用户"
                    autocomplete="off"
                  />
                </div>
              </div>
              <div id="_j_index_search_btn_all" class="search-button">
                <a role="button" href="javascript:"
                  ><i class="icon-search"></i
                ></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 游记列表 -->
      <div class="mfw-container clearfix">
        <div class="sales-entrys-container clearfix">
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-sales"
          >
            <div class="sales-entrys-title">自由行</div>
            <div class="sales-entrys-subtitle">旅行就要freestyle</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-group"
          >
            <div class="sales-entrys-title">跟团游</div>
            <div class="sales-entrys-subtitle">省心省力 行程透明</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-localdeals"
          >
            <div class="sales-entrys-title">当地游</div>
            <div class="sales-entrys-subtitle">最地道的玩法体验</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-flight"
          >
            <div class="sales-entrys-title">机票</div>
            <div class="sales-entrys-subtitle">特惠一折起</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-visa"
          >
            <div class="sales-entrys-title">签证</div>
            <div class="sales-entrys-subtitle">服务优质 出签率高</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-ship"
          >
            <div class="sales-entrys-title">邮轮</div>
            <div class="sales-entrys-subtitle">移动的海上城堡</div>
          </a>
        </div>
        <div class="mfw-wrapper">
          <div class="mfw-travelnotes">
            <div class="navbar clearfix">
              <ul id="_j_tn_nav" class="tn-nav">
                <li
                  :class="
                    this.orderType === 2
                      ? '_j_gs_tab tn-nav-hot active'
                      : '_j_gs_tab tn-nav-hot'
                  "
                  @click="changeOrderType(2)"
                >
                  <a href="javascript:void(0);">热门游记</a>
                </li>
                <li
                  :class="
                    this.orderType === 1
                      ? '_j_gs_tab tn-nav-new active'
                      : '_j_gs_tab tn-nav-new'
                  "
                  @click="changeOrderType(1)"
                >
                  <a href="javascript:void(0);">最新发表</a>
                </li>
              </ul>
              <div class="tn-write">
                <a href="javascript:void(0);" class="btn-add"><i></i>写游记</a>
              </div>
            </div>
            <div class="pagelet-block">
              <form method="post" id="searchForm">
                <input
                  type="hidden"
                  name="orderType"
                  value="1"
                  id="orderType"
                />
                <div id="_j_tn_content">
                  <div class="tn-list">
                    <div
                      class="tn-item clearfix"
                      v-for="(item, index) in queryList.content"
                      :key="index"
                    >
                      <div class="tn-image">
                        <a href="javascript:void(0);" target="_blank"
                          ><img :src="item.coverUrl" style="display: inline"
                        /></a>
                      </div>
                      <div class="tn-wrapper">
                        <dl>
                          <dt>
                            <a
                              href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                              target="_blank"
                              >{{ item.title }}</a
                            >
                          </dt>
                          <dd>
                            <a
                              href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                              target="_blank"
                            >
                              {{ item.summary }}
                            </a>
                          </dd>
                        </dl>
                        <div class="tn-extra">
                          <span class="tn-ding"
                            ><a
                              href="javascript:void(0);"
                              data-japp="articleding"
                              data-iid="12451790"
                              data-vote="2157"
                              rel="nofollow"
                              class="btn-ding"
                            ></a>
                            <em id="topvote12451790">{{
                              item.thumbsupnum
                            }}</em></span
                          >
                          <span class="tn-place"
                            ><i></i>
                            <a
                              href="javascript:void(0);"
                              rel="nofollow"
                              class="_j_gs_item"
                            >
                              {{ item.destName }}</a
                            >，by
                          </span>
                          <span class="tn-user"
                            ><a
                              href="javascript:void(0);"
                              target="_blank"
                              rel="nofollow"
                              ><img src="../assets/images/default.jpg" />
                              {{ item.author.nickname }}
                            </a></span
                          >
                          <span class="tn-nums"
                            ><i></i>{{ item.viewnum }}/{{ item.replynum }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                  <br /><br />
                  <div style="float: right">
                    <div style="float: left">
                      <span style="line-height: 30px">
                        共{{ queryList.totalPages }}页 /
                        {{ queryList.totalElements }}条&nbsp;&nbsp;&nbsp;</span
                      >
                    </div>
                    <div
                      id="pagination"
                      class="jq-pagination"
                      style="display: inline"
                    >
                      <a
                        :class="pageNum === 1 ? 'prev disabled' : 'prev '"
                        href="javascript:void(0);"
                        jp-role="prev"
                        jp-data="0"
                        @click="changePage(-1)"
                        >上一页</a
                      ><a
                        href="javascript:void(0);"
                        jp-role="page"
                        jp-data="1"
                        :class="pageNum === item ? 'active' : ''"
                        v-for="item in queryList.totalPages"
                        :key="item"
                        @click="pageTo(item)"
                        >{{ item }}</a
                      ><a
                        class="next"
                        href="javascript:void(0);"
                        jp-role="next"
                        jp-data="2"
                        @click="changePage(1)"
                        >下一页</a
                      ><a
                        class="last"
                        href="javascript:void(0);"
                        jp-role="last"
                        jp-data="2"
                        @click="endPage(queryList.totalPages)"
                        >尾页</a
                      >
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="mfw-aside">
          <div class="asidebox safety-prevention">
            <a
              href="javascript:void(0);"
              style="display: block; margin-top: 5px"
              ><img
                src="../assets/images/index-link.png"
                width="218"
                height="31"
            /></a>
          </div>
          <div class="asidebox box-gonglve">
            <div class="asidebox-hd">
              <h2 class="hd-title">旅游攻略推荐</h2>
              <a href="./strategy_index.html" class="hd-right">更多</a>
            </div>
            <div class="asidebox-bd">
              <div class="gonglve-item">
                <div class="img">
                  <a href="javascript:void(0);"
                    ><img
                      width="200px"
                      src="../assets/images/wKgE2l0chlCATLEFAA8R6jYHC0U155.jpg"
                    /><span class="mark">自由行攻略</span></a
                  >
                </div>
                <h3><a href="javascript:void(0);">广州长隆野生动物园</a></h3>
              </div>
            </div>
          </div>
          <div class="m-hotsale">
            <h3 class="hd">本周热卖</h3>
            <ul>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgIC1xOo6iAS0mlABAmBVFn6AA539.gif"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="最高立减800·上海飞马尔代夫鲁滨逊努努岛7天蜜月自由行（一价全包+私人泳池+儿童吃住优惠+婚纱摄影+可预订奥静/努努岛/中央格兰宁/康迪玛）"
                    class="title"
                  >
                    最高立减800·上海飞马尔代夫鲁滨逊努努...
                  </div>
                  <span class="price">¥11880起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgED1vzqwOAAsFFAAL1lFyHgLg47.jpeg"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="【五月美食节】上海出发塞班岛6天5晚自由行(早鸟优惠最高减500元+金卡会员立减500元+赠环岛游+军舰岛+接送机+可升级丛林探险+双重套餐不同选择+含税费1550元+导游小费+中文接送机 )"
                    class="title"
                  >
                    【五月美食节】上海出发塞班岛6天5晚自...
                  </div>
                  <span class="price">¥3180起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgBEFsscoCAVoO2AAOWOCBnxfs33.jpeg"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="ins网红拍照圣地·上海直飞美娜多5天自由行(网红无边泳池+布纳肯海龟合照+可考潜水证+深潜教学+追海豚+滑翔伞)"
                    class="title"
                  >
                    ins网红拍照圣地·上海直飞美娜多5天自...
                  </div>
                  <span class="price">¥3280起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgED1uQ-eOAMAiMAAU0ehvmPqA28.jpeg"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="金卡最高立减500+畅享一价全包·上海往返马尔代夫鲁滨逊努努岛7天5晚自由行（水屋带私人泳池+精彩晚会DJ表演+全天托儿服务+锦鲤免费升级房型/水飞上岛+可订库拉玛提岛/阿玛瑞/波杜希蒂岛/神仙珊瑚岛/奥臻岛/芙花芬岛/莫凡彼岛/尼亚玛/奥静岛）"
                    class="title"
                  >
                    金卡最高立减500+畅享一价全包·上海往...
                  </div>
                  <span class="price">¥10680起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgED1xFn0SAXJ-1AAKOKgZepzM541.png"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="北京直飞普吉岛7天自由行（端午/暑期惊喜优惠+最高立减968元+家庭/蜜月同款+屋顶/星光泳池+网红酒店/轻奢别墅任意搭+可定制曼谷/清迈多地连线+赠电话卡/VIP接送机/旅游保险）"
                    class="title"
                  >
                    北京直飞普吉岛7天自由行（端午/暑期惊...
                  </div>
                  <span class="price">¥3250起</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBannerTravel, getTravelQuery } from "@/request/api";
export default {
  data() {
    return {
      // 当前显示的轮播图
      isAciveShow: 1,
      // 轮播图
      bannerList: [],
      // 游记列表
      queryList: [],
      // 当前页
      pageNum: 1,
      // 排序方式
      orderType: 1,
      // 当前页
      currentPage: 1,

      pageArr: [],
    };
  },
  async created() {
    let res = await getBannerTravel();

    // console.log(res);
    if (res.code == 200) {
      this.bannerList = res.data;
    }

    this.getQueryData();
    // 调用轮播图
    this.bannerWork();
  },
  methods: {
    // 列表请求
    async getQueryData() {
      let query = await getTravelQuery(this.orderType, this.currentPage);
      // console.log(query);
      if (query.code == 200) {
        this.queryList = query.data;
      }
    },
    // 轮播图滚动
    bannerWork() {
      setInterval(() => {
        this.isAciveShow += 1;
        if (this.isAciveShow > 5) {
          this.isAciveShow = 1;
        }
      }, 3000);
    },
    // 预览图点击
    bannerNavClick(params) {
      this.isAciveShow = params;
    },
    // 切换栏目
    changeOrderType(orderType) {
      this.orderType = orderType;
      this.getQueryData();
    },
    // 换页
    changePage(num) {
      this.currentPage += num;
      this.pageNum = this.currentPage;
      this.getQueryData();
    },
    // 点击尾页
    endPage(end) {
      this.currentPage = end;
      this.pageNum = end;
      this.getQueryData();
    },
    // 点击页数跳转
    pageTo(page) {
      this.currentPage = page;
      this.pageNum = page;
      this.getQueryData();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/index.css";
@import "../assets/css/jqPagination.css";
</style>
